<template>
  <router-view>
    <div class="app-body">
      <icon id="ok"></icon>
      <h2>{{title}}</h2>
      <h3>{{message}}</h3>
      <a>关闭</a>
      <p>5秒后自动跳转...</p>
    </div>
  </router-view>
</template>

<script>
export default {
  props: ['title', 'message']
}
</script>

<style lang="scss" scoped>
.icon {
  display: block;
  margin: 30px auto 20px;
  font-size: 100px;
  height: 1em;
  width: 1em;
  color: #d0b06d;
}

h2, h3 {
  margin: 0;
  line-height: 1;
  font-weight: 400;
  text-align: center;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
  margin-top: 1em;
  color: $color-gray;
}

a {
  display: block;
  margin: 60px 20px 0;
  padding: .6em 0;
  text-align: center;
  background: #191920;
  color: #eee;
  border-radius: 5px;
}

p {
  margin: 20px;
  text-align: center;
  color: $color-gray;
  font-size: 14px;
}
</style>
